<template>
  <div>
    <div v-show="editStatus == false">
      <el-row style="margin-bottom:10px">
        <el-col :span="8" >
          <h4 style="margin:0"> 
            <span>视屏管理</span>
            <el-button  type="primary" class="addBtn" @click="goEdit(0)" v-if="userRole.VD_1401001">视频</el-button>
          </h4>
        </el-col>
        <el-col :span="16" style="text-align:right">
          <el-select  v-model="seachtype" placeholder="请选择" style="width:100px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-input  v-model="sheachValue" style="width:300px" placeholder="输入搜索内容"></el-input>
          <el-button type="primary" @click="sheachFun">搜索</el-button>
        </el-col>
      </el-row>

      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first">
          <my-viedo v-if="navStatus == -1" ref="children" :navStatus="navStatus" @goEdit="goEdit"></my-viedo>
        </el-tab-pane>

        <el-tab-pane label="上线" name="second">
          <my-viedo v-if="navStatus == 0" ref="children" :navStatus="navStatus" @goEdit="goEdit"></my-viedo>
        </el-tab-pane>

        <el-tab-pane label="下线" name="third">
          <my-viedo v-if="navStatus == 1" ref="children" :navStatus="navStatus" @goEdit="goEdit"></my-viedo>
        </el-tab-pane>

      </el-tabs>

    </div>
    <div v-if="editStatus">
      <edit-viedo @showlist = "getUserlist" ref="viedo" :dataViedo="dataViedo"></edit-viedo>
    </div>
  </div>
</template>

<script>
  import sortArrs from './Articel/sort'
  import editViedo from './Articel/editViedo'
  import myViedo from './myVideo'
  import Http from '@/Http/Http'
  import getTime from '@/Http/getTime'
  export default {
    data() {
      return {
        userRole:JSON.parse(sessionStorage.getItem('userSolt')),
        activeName: 'first',
        editStatus:false,
        sheachValue:'',
        seachtype:0,
        value:'全部',
        dataViedo:'',
        options:[{
          value:0,
          label:'全部'
        },{
          value:1,
          label:'牙齿矫正'
        },{
          value:2,
          label:'种植牙'
        },{
          value:3,
          label:'口腔健康'
        },{
          value:4,
          label:'儿童口腔'
        }],
        navStatus:-1,
      }
    },
    components:{
      editViedo,
      myViedo
    },
    
     mounted() {
      var obj = document.getElementById('centerbox')
      obj.addEventListener('scroll', this.handleScroll,true)
    },
    destroyed(){
      
      var obj = document.getElementById('centerbox')
      obj.removeEventListener('scroll', this.handleScroll,true)
    },
    methods: {
      handleScroll() {
        var scollobj = document.getElementById('centerbox');
        var scrollTop = scollobj.scrollTop;
        const obj = document.getElementById('tab-first');
        const myobj = obj.parentNode.parentNode;
        if(scrollTop> 32){
          myobj.style.position = 'fixed';
          myobj.style.top = 0;
        } else {
          myobj.style.position = 'relative';
        }
      },
      handleClick(tab) {
        this.navStatus = Number(tab.index)-1;
      },
      getUserlist() {
        this.editStatus = false;
        this.$refs.children.getUserlist()
      },   
      goEdit(val){
        val? this.dataViedo = val : this.dataViedo = '';
        this.editStatus = true;
      },
      timeFun(val) {
        return getTime(val)
      },
    
      edit(val) {
        this.dataViedo = val;
        this.editStatus = true
      },
    
   
       //搜索
      sheachFun(val){
        const param = {
          "title":this.sheachValue,
          "type":this.seachtype
        };
        this.$refs.children.sheachData(param)
        
      },
      //排序
      sortBtn() {
        this.sortStatus = true
      },
     
      //分页
      handleSizeChange(val) {
        this.pageSize = val;
        this.getUserlist()
        
      },
      handleCurrentChange(val) {
        this.page = val;
        this.getUserlist()
        
      },
      //视频上下线
      editUpvideo(state,row) {
        
        Http.upVideo(state,row.video.id)
        .then( res => {
          if( res.data.code ==200){
            this.$message.success('下线成功');
            this.getUserlist()
          } else if(res.data.code == -1003) {
            this.$message.error(`请求失败原因：${res.data.message}`)
             setTimeout(()=>{
              this.$router.push('/')
            },2000)
          }
          
        })
        .catch( error => {
          this.$message.error('服务器请求失败')
        })
      },
      stickFun(row) {
        
        Http.postStickVideo(row)
        .then( res => {
          if( res.data.code ==200){
            this.$message.success('置顶成功')
            this.getUserlist()
          } else if(res.data.code == -1003) {
            this.$message.error(`请求失败原因：${res.data.message}`)
             setTimeout(()=>{
              this.$router.push('/')
            },2000)
          }
        })
        .catch( error => {
          this.$message.error('服务器请求失败')
        })
      },
     
    }
  }
</script>
<style>

</style>
